<template>
    <div v-loading="createProjectLoading" class="template-preview-container">
     <!--   <div class="back-view">
            <el-button size="mini" round @click="$router.back(-1)">
                <i class="el-icon-arrow-left" />
                返回
            </el-button>
        </div>-->
        <div class="template-preview-content">
            <el-scrollbar style="height: 80vh;">
                <project-form
                    v-if="projectConfig.projectKey"
                    :project-config="projectConfig"
                    @submit="submitForm"
                />
            </el-scrollbar>
            <div style="margin: 20px;">
               <div>
                 <el-button
                   type="primary"
                   v-hasPermi="['saveFormProject']"
                   @click="handleAdd"
                 >
                   使用该模板
                 </el-button>

                 <el-button
                   type="primary"
                   v-if="!checkPermi(['saveFormProject'])"
                   @click="noPermission('暂无创建项目权限!')"
                 >
                   使用该模板
                 </el-button>
               </div>
              <div style="margin-top: 20px;">
                <el-button size="mini" round @click="$router.back(-1)">
                  <i class="el-icon-arrow-left" />
                  返回上一页
                </el-button>
              </div>
            </div>
        </div>

      <!-- 添加或修改参数配置对话框 -->
      <el-dialog :title="title" :visible.sync="addUpdateOpen" width="800px" append-to-body>
        <el-form ref="form" :model="form" :rules="addUpdateOpenRules"  label-width="80px">
          <el-form-item label="项目名称" prop="projectName">
            <el-input :hide-required-asterisk="true" autocomplete="off" v-model="form.projectName" placeholder="请输入项目名称,50个字符长度" maxlength="50" />
          </el-form-item>

          <el-form-item label="项目描述" prop="description">
            <el-input type="textarea" autocomplete="off" :rows="4"  v-model="form.description" placeholder="请输入项目描述"/>
          </el-form-item>

        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="createProjectByTemplate">确 定</el-button>
          <el-button @click="cancelAddUpdateOpen">取 消</el-button>
        </div>
      </el-dialog>

    </div>
</template>

<script>
import ProjectForm from '@/views/duojuhe/form/preview/ProjectForm'

import {createFormProjectByTemplate} from '@/api/form/formProject'

export default {
    name: 'TemplatePreview',
    components: {
        ProjectForm
    },
    props: {},
    data() {
        return {
            // 弹出层标题
            title: "",
            // 是否显示新增修改弹出层
            addUpdateOpen: false,
            // 增加修改表单参数
            form: {},
            // 新增修改表单校验
            addUpdateOpenRules: {
              projectName: [
                { required: true, message: "项目名称不能为空",trigger: "blur" },
              ]
            },
            createProjectLoading: false,
            projectConfig: {
                projectKey: '',
                preview: false,
                projectKind: 2,
                showBtns: true
            }
        }
    },
    mounted() {
        this.projectConfig.projectKey = this.$route.query.key
    },
    methods: {
        // 取消修改增加弹出层按钮
        cancelAddUpdateOpen() {
          this.addUpdateOpen = false
        },
        /** 新增按钮操作 */
        handleAdd() {
          this.reset();
          this.addUpdateOpen = true;
          this.title = "创建项目";
        },
      // 表单重置
      reset() {
        this.form = {
          projectId: this.projectConfig.projectKey,
          projectName: undefined
        };
        this.resetForm('form')
      },

      /** 提交保存按钮 */
      createProjectByTemplate: function() {
        this.$refs["form"].validate(valid => {
          if (valid) {
            if (this.form.projectId) {
              createFormProjectByTemplate(this.form).then(response => {
                this.createProjectLoading = false
                if (response.data) {
                  this.addUpdateOpen = false
                  this.$router.replace({path: '/project/form/editor', query: {key: response.data, active: 1}}).catch(err => err)
                }
              }).catch(() => {
                this.createProjectLoading = false
              })
            }
          }
        });
      },
        submitForm() {

        }
    }
}
</script>

<style lang="scss" scoped>
.template-preview-container {
    display: flex;
    width: 100%;
    height: 98%;
    overflow-x: hidden;
    flex-direction: column;
    align-items: center;
    align-content: center;
    overflow-y: hidden;
}
.back-view {
    display: flex;
    width: 80%;
    align-content: flex-start;
    margin: 10px;
}
.template-preview-content {
    display: flex;
}
</style>
